<script setup lang="ts">
import {onActivated, ref} from 'vue'
import {getUserTagsListApi, updatedUserTagsApi, createdUserTagsApi} from "@/apps/admin/api/user/tags";
import {TableColumn} from "@/components/AppTable/TableType";
import {usePopupForm} from "@/components/FunctionComponents";

/**
 * 标签数据
 */
const tags = ref<any[]>([])


/**
 * 获取用户标签数据
 */
async function getUserTagsList() {
  const {code, data} = await getUserTagsListApi({})
  if (code === 200) {
    tags.value = data
  }
}

const columns: Array<TableColumn> = [
  {prop: 'id', label: 'ID', width: 80, fixed: 'left'},
  {prop: 'name', label: '名称', width: 170, fixed: 'left'},
  {type: 'action', label: '操作', width: 100, align: 'center', fixed: 'left'},
  {prop: 'desc', label: '描述/备注', minWidth: 180},
  {prop: 'status', label: '状态', width: 100, type: 'status'},
  {prop: 'created_at', label: '添加时间', type: 'timestramp', width: 170},
  {prop: 'updated_at', label: '上次编辑', type: 'timestramp', width: 170},
]

/**
 * 编辑标签
 */
function updatedTags(id: number) {
  usePopupForm({
    api: updatedUserTagsApi,
    width: "400px",
    query: {id},
    onSuccess: getUserTagsList
  })
}


/**
 * 编辑标签
 */
function createdTags() {
  usePopupForm({
    api: createdUserTagsApi,
    width: "400px",
    onSuccess: getUserTagsList
  })
}


/**
 * 删除标签
 */
function deleteTags(id: number) {

}

onActivated(getUserTagsList)
</script>
<template>
  <data-card title="用户标签">
    <template #right>
      <el-button type="primary" size="small" @click="createdTags">添加</el-button>
    </template>
    <app-interval/>
    <app-table height="calc(var(--ach) - 85px)" :columns :data="tags">
      <template #action="{ row }">
        <el-space>
          <operate-link @tap="updatedTags(row.id)">
            编辑
          </operate-link>
          <operate-link @tap="deleteTags(row)" confirm="确定要删除此标签吗">
            删除
          </operate-link>
        </el-space>
      </template>
    </app-table>
  </data-card>
</template>